import { Modal } from "antd"
import React, { useEffect, useState } from "react"
import { Image, Layer, Stage } from "react-konva"

interface ImageDisplayProps {
  imageData: string | null
  title: string
  width?: number
  height?: number
}

const ImageDisplay: React.FC<ImageDisplayProps> = ({
  imageData,
  title,
  width = 500,
  height = 400
}) => {
  const [image, setImage] = useState<HTMLImageElement | null>(null)
  const [showModal, setShowModal] = useState(false)

  useEffect(() => {
    if (imageData) {
      const img = new window.Image()
      img.src = `data:image/jpeg;base64,${imageData}`
      img.onload = () => {
        setImage(img)
      }
    } else {
      setImage(null)
    }
  }, [imageData])

  return (
    <div style={{ textAlign: "center" }}>
      <h3 style={{ color: "#595959", marginBottom: 10 }}>{title}</h3>
      <div style={{ cursor: "pointer" }} onClick={() => setShowModal(true)}>
        <Stage width={width} height={height}>
          <Layer>
            <Image image={image} width={width} height={height} />
          </Layer>
        </Stage>
      </div>

      <Modal
        title={title}
        open={showModal}
        onCancel={() => setShowModal(false)}
        footer={null}
        width="80vw"
        style={{ top: 20 }}
      >
        <Stage width={1200} height={800}>
          <Layer>
            <Image image={image} width={1200} height={800} />
          </Layer>
        </Stage>
      </Modal>
    </div>
  )
}

export default ImageDisplay
